Web Design 101

TUJ Fall 2020

This Course…

This introductory course will teach you the fundamentals of how to plan, design, and create a modern web site for your personal portfolio or business.

My commitment to you

I will

  • be your guide through foundational concepts in web design
  • show you live examples of how you can create features for your web page
  • answer questions you have as we work through our projects
  • try to respond to any emails you send in a timely manner
  • this course is designed to help you gain an understanding of how the web is built (because you will be building webpages)
  • you’ll understand how to create a web page and change it (because we will work on making changes together)
  • you will have a solid foundation for learning about more advanced topics in web design and development should you chose to continue learning

My expectations of you

You will attend and participate in these classes

You will submit your exercises each week before class on GitHub

You will explore and experiment outside of class

You will help your classmates learn

You will give yourself permission to have fun

This course is about YOU.

I want you to stay focused on acheiving YOUR goals as we work together through this class.

Course mechanics

How to learn from this course

  • take notes
  • review your notes
  • work on the materials outside of class
  • make a commitment

I am your GUIDE and I will help you build solid foundations so that you can overcome the challenges that are unique to YOUR goals.

Check in on Canvas throughout the course.

There is no textbook for this course.

Course Overview

  • Week 1 Getting to know each other and HTML

  • Week 2 How to Design for the Web & Making Your First Live HTML Web Page

  • Week 3 From Design to Code

  • Week 4 Responsive Design for Mobile Devices

  • Week 5 Adding Interaction with JavaScript

  • Week 6 How the Web Works, or, Why Forms Aren’t Easy

  • Week 7 Flash is Dead: Understanding Modern Web Animations

  • Week 8 Sharing your projects and next steps

Today’s Agenda

  • Intro to the course
  • Introduce yourselves
  • What is the web?
  • Getting started with HTML
  • break
  • Activity: Write an HTML Document
  • Writing Modern Software using Version Control

Every week we are going to build on the skills you learned the previous week so that you can do more and more things. But MY goal is to give you, TODAY, the independence to experiment outside of the classroom.

Questions?

Getting to know each other

  • who are you
  • what do you do
  • why you are taking this class
  • a website you spend a lot of time on

What is the Web?

a network of connected computers

The browser address or locator bar.

users send a request to a server

The content that is served to the browser.

the server then returns content back to the browser based on the location we’ve entered

Content of the web is written using 3 technologies:

  • HTML
  • CSS
  • JavaScript

Getting started with HTML

What is HTML?

HyperText Markup Language

Hypertext

Wikipedia

This Wikipedia article on hypertext is an example of hypertext.
source: Wikipedia

Why is Hypertext Powerful?

Puts users first!

Lets them read what they want to read when they want to read it.

TV Tropes

TV Tropes is another great hypertext example.
source: TV Tropes

Why is Hypertext Hard?

  • More challenging to design for.
  • You have to get users to meaningful choices quickly.
  • You have to make it easy for them to find what they’re looking for before they tune out and move on.

How Do We Write HTML?

HTML is comprised of <tags> which are wrapped around content to create nodes or elements.

<p>This content is wrapped with a paragraph tag.</p>

Nesting

<div>
  <ul>
    <li>This is a list item element</li>
    <li>This text has a <span>nested span</span></li>
    <li>This item has <a href="example.html">a link</a></li>
  </ul>
</div>

Why Structure Matters

Structure is necessary to help machines understand what to do with our content.

  • browsers
  • screen readers
  • web crawlers
  • script files (like JavaScript)

Commonly Used

HTML5, the current standard for HTML, has roughly 100 tags.

The most useful HTML tags are what we call semantic tags.

To have mastery over HTML, you will need to be familiar with all of them.

To be able to create basic web pages, you will need to remember at roughly 20 of them

Let’s look at the HTML Cheatsheet I provided in Canvas and talk about some of the common tags.

Practice

In Canvas under Week 1, find the assignment:
Creating an HTML page

Start the assignment using Stackblitz:
stackblitz.com/fork/web-platform

Version Control

Woman works on laptop with branching node illustration
Katerina Limpitsouni via Undraw

Version control is one of the most powerful tools we have in software development.

Version Control is a tool that tracks changes made to the files in our code. It works with any kind of code and any kind of project.

Why use Version Control

Manual tracking is messy

Directory listing files with increasingly inscrutable names as informal version control

Making changes can be scary

Removing a block from the Jenga tower and causing the rest of the tower to fall
credit: Jorge Barrios via Wikipedia

Montage of web articles about fixing WordPress “White Screen of Death”
credit: Various

Version control helps manage complexity

Software is - complex - code difficult for humans to read - has dependencies - is abstract

Version control helps us manage versions easily

Our integration with Netlify later will be a good example of why using git is helpful.

Key terms you need to know

Look in Canvas under Pages / Important Terms for the definitions for the following key version control terms

  • git
  • repository / repo
  • history
  • branches
  • commits
  • push
  • pull
  • merge
  • clone